import 'dart:ui';
import 'package:liuxlcommon/lget/lget.dart';
import 'package:ladder_cash/app/com/view/my_app_bar2.dart';
import 'package:ladder_cash/app/page/component/decoration_bg.dart';
import 'package:ladder_cash/config/super_theme.dart';
import 'package:ladder_cash/gen/assets.gen.dart';
import 'package:ladder_cash/generated/assets.dart' as myAssets;
import 'package:ladder_cash/value/app_colors.dart';
import 'package:liuxlcommon/lget/LGetScaffold.dart';
import 'package:liuxlcommon/lget/LState.dart';
import 'package:ladder_cash/app/com/view/webview/my_web/my_web_page.dart';
import 'package:ladder_cash/app/key_mix.dart';
import 'package:ladder_cash/value/app_const.dart';
import 'package:ladder_cash/value/app_lstyle.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:liuxlcommon/util/string_utils.dart';
import 'package:liuxlcommon/util/toast_util.dart';
import 'package:liuxlcommon/view/loading_view.dart';
import 'package:liuxlcommon/view/lxl_widget.dart';
import 'package:liuxlcommon/view/my_box.dart';
import 'package:liuxlcommon/view/my_style.dart';
import 'package:ladder_cash/app/router_manage.dart';

import '../../../generated/l10n.dart';
import '../../../library/src/logger.dart';
import '../../app.dart';
import '../component/base_page_bg.dart';
import '../component/common.dart';
import 'order_logic.dart';

class OrderPage extends StatefulWidget {
  int? tabIndex;
  OrderPage({this.tabIndex, super.key});

  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends LState<OrderPage> {
  final logic = Get.put(OrderLogic());

  @override
  get init {
    if (OrderLogic.tabIndex == 0) OrderLogic.tabIndex = widget.tabIndex ?? 0;
  }

  @override
  get body => getBasePageBg(
          child: LColumn.eazy([
        getTabBar(title: S.current.personalCenter),
        Container(
          margin: EdgeInsets.all(12.w),
          child: tabs,
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: getTopRadius(isAll: true)),
        ),
        Expanded(
            child: Container(
          child: listBox,
        ))
      ]));

  get listBox => GetBuilder<OrderLogic>(
        assignId: true,
        builder: (logic) {
          return LContainer(
            lStyle: LStyle(color: Colors.red),
            child: LoadingView(
              datas: logic.orders,
              itemCall: (context, position) => itemView(position),
              isPullUp: true,
              isPullDown: true,
              onLoad: (type) async {
                if (type == 1) {
                  //下拉
                  logic.page = 1;
                } else if (type == 2) {
                  //上拉
                  logic.page++;
                }
                await logic.getData();
              },
              onSuccess: () {
                if (logic.orders != null) logic.update();
              },
            ),
          );
        },
      );

  itemView(int position) {
    dynamic model = logic.orders![position];
    return InkWell(
      onTap: (){
        RouterManage.to(model['loanDetailUrl'.hx]);
      },
      child: Container(
        margin: EdgeInsets.only(top: 20.w, left: 16.w, right: 16.w),
        padding: EdgeInsets.all(12.w),
        decoration:
            BoxDecoration(
                image: getDecorationBg(Assets.home.home9527Bg.path)
            ),
        child: Column(
          children: [
            16.lsh,
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Row(
                children: [
                  16.lsw,
                  LImage.easy(model['productLogo'.hx] ?? "", 28.w, 28.w, 4.w),
                  7.lsw,
                  middleFont(model['productName'.hx],
                      fontFamily: "italic", fontWeight: FontWeight.w900),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(right: 16.w),
                child:
                    LText.easy(model['buttonText'.hx], 13.sp, fw4, Colors.white)
                        .style(rzBtnSty
                          ..fontSize = 12.sp
                          ..backgroundColor = Colors.white
                          ..backgroundImage = Assets.order.orderBtnBg.path
                          ..radius = 30.w
                          ..color = Colors.white)
                        .size(null, 34.w)
                        .paddingH(10.w),
              )
            ]),
            16.lsh,
            Container(
              decoration: getBorderDecoration(),
              child: LColumn(
                  lStyle: LStyle(
                      padding: EdgeInsets.symmetric(horizontal: 16.w), css: '''
          padding:8px 18px;               
                    width: 323px;
       '''),
                  children: [
                    14.lsh,
                    textBorder(model['orderAmount'.hx],
                        fontsize: 30.sp,
                        fontFamily: 'italic',
                        fontWeight: FontWeight.w900),
                    Container(
                      padding: EdgeInsets.all(12.w),
                      decoration: BoxDecoration(
                          borderRadius: getTopRadius(isAll: true),
                          color: SuperTheme.lightBgPrimary),
                      child: Column(
                        children: [
                          for (dynamic n in model['listData'.hx]) ...[
                            [
                              LText(n['title'.hx],
                                  lStyle: AppLStyle.textStyle..flex = 1),
                              LText(n['txt'.hx], lStyle: AppLStyle.textStyle),
                            ].row,
                          ],
                        ],
                      ),
                    ),
                    if (StringUtils.isNotEmpty(model['agreement_txt'.hx])) ...[
                      LRow(
                        lStyle: LStyle(padding: const EdgeInsets.only(top: 10)),
                        children: [
                          LText(
                            "${model['agreement_txt'.hx]} ",
                            lStyle: AppLStyle.textPrimaryStyle,
                          ),
                        ],
                        onTap: () {
                          Get.to(MyWebPage(url: model['agreement_url'.hx]));
                        },
                      ),
                      12.lsh
                    ]
                  ]),
            )
          ],
        ),
      ),
    );
  }

  get tabs {
    return GetBuilder<OrderLogic>(
      assignId: true,
      builder: (logic) {
        return LFlexH([
          for (int i = 0; i < logic.tabNames.length; i++)
            LColumn.eazy([
              LText(logic.tabNames[i],
                  lStyle: OrderLogic.tabIndex == i ? selectSty : unSelectSty,
                  onTap: () {
                OrderLogic.tabIndex = i;
                logic.refreshData();
              }),
              // LContainer()
              //     .bgColor(logic.tabIndex == i ? 0xFF920784.color : Colors.white)
              //     .radius(2.w)
              //     .size(12.w, 4.w)
            ]).flex(1)
        ]).marginH(10.w).align(Alignment.center).size(double.infinity, 52.w);
      },
    );
  }

  get selectSty => LStyle(
      alignment: Alignment.center,
      height: 30.w,
      radius: 5.w,
      backgroundColor: SuperTheme.btnPrimary,
      // gradient: LinearGradient(
      //     colors: [Color(0xFFF8D15D), Color(0xFFFD8330)],
      //     begin: Alignment.topCenter,
      //     end: Alignment.bottomCenter),
      css: ''' font-weight: 500;
font-size: 14px; 
color: #333333;''');

  get unSelectSty => LStyle(
      alignment: Alignment.center,
      fontSize: 14.sp,
      color: const Color(0xFF333333));

  @override
  void dispose() {
    Get.delete<OrderLogic>();

    super.dispose();
  }

  @override
  get finish {}
}
